<template>
	<view class="page-container">
	  <!-- 状态栏占位 -->
	  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
	  
	  <!-- 内容卡片 -->
	  <view class="content-card">
		<view class="card-title">小舟报社区规则</view>
		
		<!-- 规则内容区域 -->
		<view class="rules-content">
		  <view class="rule-section">
			<view class="section-title">利益相关声明</view>
			<view class="section-content">
			  中国法规文化调查定位，具备著作指型别制度，约束要求，这里著作指关义规则，内容规则，借得规则符规从义规则规则符规包规则，说明这其中的责任，或不来不得及更正人努力，早也会许可，你也好学得多。
			</view>
		  </view>
		  
		  <view class="rule-section">
			<view class="section-title">社区使用声明</view>
			<view class="section-content">
			  中国法规文化调查定位，具备著作指型别制度，约束要求，这里著作指关义规则，内容规则，借得规则符规从义规则规则符规包规则，说明这其中的责任，或不来不得及更正人努力，早也会许可，你也好学得多。
			</view>
		  </view>
		</view>
	  </view>
  
	  <!-- 确认按钮 -->
	  <view class="confirm-btn" :class="{ active: canConfirm }" @tap="handleConfirm">
		<text>我已阅读且知晓</text>
		<text v-if="!canConfirm">({{ countdown }})</text>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		statusBarHeight: 20,
		countdown: 5,
		canConfirm: false,
		timer: null
	  }
	},
	onLoad() {
	  this.getStatusBarHeight()
	  this.startCountdown()
	},
	onUnload() {
	  if (this.timer) {
		clearInterval(this.timer)
	  }
	},
	methods: {
	  getStatusBarHeight() {
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	  },
	  startCountdown() {
		this.timer = setInterval(() => {
		  if (this.countdown > 1) {
			this.countdown--
		  } else {
			clearInterval(this.timer)
			this.countdown = 0
			this.canConfirm = true
		  }
		}, 1000)
	  },
	  handleConfirm() {
		if (!this.canConfirm) return
		
		// 确认操作
		uni.showToast({
		  title: '确认成功',
		  icon: 'success',
		  duration: 1500
		})
		
		// 延迟返回或跳转
		setTimeout(() => {
		  // uni.navigateBack()
		  // 或者跳转到指定页面
		  uni.redirectTo({
		    url: '/pages/login2/login2'
		  })
		}, 1500)
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30rpx;
  }
  
  .content-card {
	/* width: 100%; */
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: 40rpx;
	padding: 40rpx 30rpx;
  }
  
  .card-title {
	font-size: 36rpx;
	font-weight: 500;
	text-align: center;
	margin-bottom: 40rpx;
  }
  
  .rule-section {
	margin-bottom: 30rpx;
  }
  
  .section-title {
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 20rpx;
  }
  
  .section-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
  }
  
  .confirm-btn {
	position: fixed;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 88rpx;
	background-color: #ccc;
	color: #fff;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
  }
  
  .confirm-btn.active {
	background-color: #8a2be2;
  }
  
  .confirm-btn:active.active {
	opacity: 0.8;
  }
  </style>